<template>
  <div class="history-page">
    <!-- 搜索框 -->
    <el-input
        v-model="search"
        placeholder="搜索文件名称"
        prefix-icon="el-icon-search"
        clearable
        class="search-input"
    />

    <!-- 文件列表表格 -->
    <el-table
        :data="filteredFiles"
        stripe
        style="width: 100%; margin-top: 16px"
        @row-click="handleRowClick"
    >
      <!-- 文件名 -->
      <el-table-column prop="name" label="文件名称" />

      <!-- 创建时间 -->
      <el-table-column prop="createdAt" label="创建时间" />

      <!-- 状态 -->
      <el-table-column label="状态">
        <template #default="{ row }">
          <el-tag
              :type="tagType(row.status)"
              :disable-transitions="true"
          >{{ statusText(row.status) }}</el-tag
          >
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button
              type="text"
              size="small"
              @click.stop="confirmDelete(row)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 空状态提示 -->
    <el-empty
        v-if="filteredFiles.length === 0"
        description="暂无上传记录"
        class="empty-state"
    />
  </div>
</template>

<script>
export default {
  name: 'HistoryPage',
  data() {
    return {
      search: '',
      files: [
        // 伪造数据，后端对接后替换这一段
        {
          id: '1',
          name: '复习2024.pdf',
          createdAt: '2025-05-25 01:15',
          status: 'success' // uploading | parsing | success | error | upload_error
        },
        {
          id: '2',
          name: '论文范例.docx',
          createdAt: '2025-05-24 14:02',
          status: 'parsing'
        },
        {
          id: '3',
          name: '测试文件.pptx',
          createdAt: '2025-05-23 09:30',
          status: 'uploading'
        }
      ]
    };
  },
  computed: {
    // 根据搜索关键字过滤
    filteredFiles() {
      const kw = this.search.trim().toLowerCase();
      if (!kw) return this.files;
      return this.files.filter(f => f.name.toLowerCase().includes(kw));
    }
  },
  methods: {
    // 行点击处理：只有解析成功才跳转
    handleRowClick(row) {
      if (row.status === 'success') {
        this.$router.push({
          path: '/mainlayout/notes',
          query: { fileId: row.id }
        });
      }
    },
    // 删除前二次确认
    confirmDelete(row) {
      this.$confirm(
          `确认删除 "${row.name}" 吗？`,
          '提示',
          { type: 'warning' }
      )
          .then(() => {
            this.files = this.files.filter(f => f.id !== row.id);
            this.$message.success('已删除');
          })
          .catch(() => {});
    },
    // 状态标签文字
    statusText(status) {
      switch (status) {
        case 'uploading':
          return '上传中';
        case 'parsing':
          return '解析中';
        case 'success':
          return '解析成功';
        case 'error':
          return '解析失败';
        case 'upload_error':
          return '上传失败';
        default:
          return status;
      }
    },
    // 状态标签颜色
    tagType(status) {
      switch (status) {
        case 'uploading':
        case 'parsing':
          return 'info';
        case 'success':
          return 'success';
        case 'error':
        case 'upload_error':
          return 'danger';
        default:
          return '';
      }
    }
  }
};
</script>

<style scoped>
.history-page {
  padding: 24px;
  background: #f9fafb;
}

/* 搜索框 */
.search-input {
  max-width: 360px;
}

/* 空状态居中 */
.empty-state {
  margin-top: 40px;
}
</style>
